<template>
  <div class="cart">
    <div
      class="cart-list"
      v-if="cartList.length > 0"
    >
      <div
        class="cart-list-item"
        v-for="item in cartList"
        :key="item.id"
      >
        <div class="cart-left">
          <van-checkbox v-model="item.isCompleted" />
        </div>
        <van-card
          class="cart-right"
          :price="item.price + '.00'"
          desc="描述信息"
          :title="item.title"
          :thumb="item.src"
        >
          <template #num>
            <van-stepper
              v-model="item.count"
              theme="round"
              button-size="22"
              disable-input
            />
          </template>
        </van-card>
      </div>
    </div>
    <div v-else>购物车空空如也</div>

    <van-submit-bar
      :price="getAllPrice * 100"
      button-text="提交订单"
      @submit="() => {}"
    >
      <van-checkbox v-model="toggleChecked">全选/反选</van-checkbox>
      <template #tip> 你的收货地址不支持同城送, <span @click="() => {}">修改地址</span> </template>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['getAllPrice', 'checkboxAll']),
    toggleChecked: {
      get() {
        return this.checkboxAll;
      },
      set(val) {
        // console.log(val);
        this.$store.commit('cart/TOGGLE_CHECKED', val);
      },
    },
  },
  data() {
    return {
      checked: true,
    };
  },
};
</script>
<style lang="scss" scoped>
.cart {
  padding: 10px;
  .cart-list {
    .cart-list-item {
      border: 1px solid #eee;
      display: flex;
      margin-bottom: 10px;
      .cart-left {
        flex: 0.5;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cart-right {
        flex: 2.5;
        margin-top: 0;
        .van-card__title {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
